<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qiu</title>
    <link rel="stylesheet" href="css/font/icon-font.css">
    <link rel="stylesheet" href="css/base/reset.css">
    <link rel="stylesheet" href="css/modules/common.css">
    <link rel="stylesheet" href="css/modules/button.css">
    <link rel="stylesheet" href="css/modules/color.css">
    <link rel="stylesheet" href="css/modules/icon.css">
    <link rel="stylesheet" href="css/modules/modal.css">
    <link rel="stylesheet" href="css/modules/form.css">
    <link rel="stylesheet" href="css/modules/tab.css">
    <link rel="stylesheet" href="css/pages/reader.css">
</head>
<body>

<header></header>

<main>
    <div class="toc-side">
        <div class="toc">
            <div class="toc-head">Table of Contents</div>
        </div>
    </div>
    <div class="main">
        <div class="toc-button">
            <svg viewBox="0 0 1490 1024" width="16" height="16">
                <path d="M0 65.163636C0 29.174747 29.084579 0 65.19808 0L1424.256465 0C1460.264401 0 1489.454545 29.247991 1489.454545 65.163636 1489.454545 101.152526 1460.369967 130.327273 1424.256465 130.327273L65.19808 130.327273C29.190144 130.327273 0 101.079282 0 65.163636L0 65.163636ZM0 512C0 476.01111 29.084579 446.836364 65.19808 446.836364L1424.256465 446.836364C1460.264401 446.836364 1489.454545 476.084354 1489.454545 512 1489.454545 547.98889 1460.369967 577.163636 1424.256465 577.163636L65.19808 577.163636C29.190144 577.163636 0 547.915646 0 512L0 512ZM0 958.836364C0 922.847474 29.084579 893.672727 65.19808 893.672727L1424.256465 893.672727C1460.264401 893.672727 1489.454545 922.920718 1489.454545 958.836364 1489.454545 994.825253 1460.369967 1024 1424.256465 1024L65.19808 1024C29.190144 1024 0 994.752009 0 958.836364L0 958.836364Z"></path>
            </svg>
        </div>
        <div class="page"></div>
        <div class="page doc hide">
            <iframe width="100%" height="100%" id="full-page-iframe"></iframe>
        </div>
        <div class="prev-page"></div>
        <div class="next-page"></div>
    </div>
</main>

<footer></footer>

<!--工具栏-->
<div class="tool-bar disable-select" id="tool-bar">
    <button class="tool-bar-btn drag-me" id="drag-me">
        <i class="material-icons">drag_handle</i>
    </button>
    <button class="tool-bar-btn" data-full-screen="false" id="full-screen">
        <i class="material-icons" title="full screen">fullscreen</i>
        <i class="material-icons hidden" title="exit full screen">fullscreen_exit</i>
    </button>
    <button class="tool-bar-btn modal-trigger" id="setting" modal-target="setting-panel" title="setting">
        <i class="material-icons">settings</i>
    </button>
    <button class="tool-bar-btn" id="book-mark-list" title="bookmark list">
        <i class="material-icons">format_list_bulleted</i>
    </button>
    <button class="tool-bar-btn" id="book-mark" title="add bookmark">
        <i class="material-icons">bookmark</i>
    </button>
    <button class="tool-bar-btn modal-trigger" id="color" modal-target="color-panel" title="background color">
        <i class="material-icons">color_lens</i>
    </button>
    <button class="tool-bar-btn" id="exit" title="exit">
        <i class="material-icons">exit_to_app</i>
    </button>
</div>

<!--设置panel-->
<div class="modal" id="setting-panel">
    <div class="modal-header">Setting</div>
    <div class="modal-content">
        <!--字体：字体族、颜色、大小-->
        <!--theme：普通、夜间-->
        <!--阅读模式：单页阅读、双页阅读、文档阅读-->
        <div id="setting-tab" class="tab-set">
            <ul class="tabs">
                <li class="tab active"><a href="#font-setting">font</a></li>
                <li class="tab"><a href="#spacing-setting">spacing</a></li>
                <li class="tab"><a href="#style">style</a></li>
                <li class="tab"><a href="#page-setting">page</a></li>
                <li class="tab"><a href="#other">other</a></li>
            </ul>
            <div class="tab-panel" id="font-setting">
                <div class="font-size-control">
                    <button class="btn-tip small font-size-reduce">
                        <i class="material-icons">remove</i>
                    </button>
                    <span class="font-size">default</span>
                    <button class="btn-tip small font-size-add">
                        <i class="material-icons">add</i>
                    </button>
                </div>
            </div>
            <div class="tab-panel" id="page-setting">
                <div class="page-control">
                    <div>
                        <input type="radio" id="horizontal" name="page-mode">
                        <label for="horizontal" title="single page">
                            <i class="icon-horizontal-page"></i>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="double-page" name="page-mode">
                        <label for="double-page" title="double page">
                            <i class="icon-double-page"></i>
                        </label>
                    </div>
                    <div>
                        <input type="radio" id="vertical" name="page-mode">
                        <label for="vertical" title="scroll">
                            <i class="icon-vertical-page"></i>
                        </label>
                    </div>
                </div>
            </div>
            <div class="tab-panel" id="spacing-setting">
                <div class="spacing-control">
                    <div class="line-height-box">
                        <div class="clear spacing-info">
                            <span class="left second-msg">Line height</span>
                            <span class="line-height right">default</span>
                        </div>
                        <div class="ctrl-btns">
                            <button class="btn-tip small line-height-reduce">
                                <i class="material-icons">remove</i>
                            </button>
                            <button class="btn-tip small line-height-add">
                                <i class="material-icons">add</i>
                            </button>
                        </div>
                    </div>
                    <div class="letter-spacing-box">
                        <div class="clear spacing-info">
                            <span class="left second-msg">Letter spacing</span>
                            <span class="letter-spacing right">default</span>
                        </div>
                        <div class="ctrl-btns">
                            <button class="btn-tip small letter-spacing-reduce">
                                <i class="material-icons">remove</i>
                            </button>
                            <button class="btn-tip small letter-spacing-add">
                                <i class="material-icons">add</i>
                            </button>
                        </div>
                    </div>
                    <div class="word-spacing-box">
                        <div class="clear spacing-info">
                            <span class="left second-msg">Word spacing</span>
                            <span class="word-spacing right">default</span>
                        </div>
                        <div class="ctrl-btns">
                            <button class="btn-tip small word-spacing-reduce">
                                <i class="material-icons">remove</i>
                            </button>
                            <button class="btn-tip small word-spacing-add">
                                <i class="material-icons">add</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-panel" id="style">
                <div class="style-control">
                    <label class="stylesheet" title="import stylesheet">
                        <i class="material-icons">stars</i>
                        <input type="file" accept="text/css" id="import-stylesheet" class="hidden">
                    </label>
                    <button class="restore" id="restore-style" title="revert to the default style">
                        <i class="material-icons">restore</i>
                    </button>
                </div>
                <!--<div class="style-info">-->
                    <!--<span class="second-msg">find stylesheet?</span>-->
                    <!--&nbsp;-->
                    <!--<a href="https://github.com/bubble-Q/QiuReader/user-stylesheet" target="_blank">Go</a>-->
                <!--</div>-->
            </div>
            <div class="tab-panel" id="other">
                <div class="other-control">
                    <div class="other-row">
                        <span class="second-msg">Popup</span>
                        <div class="ctrl-btns">
                            <button class="btn-tip small" id="toggle-popup">enabled</button>
                        </div>
                    </div>
                    <div class="left-right-margin other-row">
                        <span class="second-msg">Left and right margins</span>
                        <div class="ctrl-btns">
                            <button class="btn-tip small" id="reduce-lr-margin">
                                <i class="material-icons">remove</i>
                            </button>
                            <button class="btn-tip small" id="add-lr-margin">
                                <i class="material-icons">add</i>
                            </button>
                        </div>
                    </div>
                    <div class="top-bottom-margin other-row">
                        <span class="second-msg">Top and bottom margins</span>
                        <div class="ctrl-btns">
                            <button class="btn-tip small" id="reduce-tb-margin">
                                <i class="material-icons">remove</i>
                            </button>
                            <button class="btn-tip small" id="add-tb-margin">
                                <i class="material-icons">add</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn-tip modal-close" modal-target="setting-panel">Close</button>
    </div>
</div>

<!--book-mark-panel-->
<div class="book-mark-panel hide" id="book-mark-panel">
    <div class="book-mark-head clear">
        Bookmarks
        <i class="material-icons book-mark-panel-close right">close</i>
    </div>
    <ul class="book-mark-content">
    </ul>
</div>
<div class="book-mark-overlay"></div>

<!--book-mark-modal-->
<div class="modal" id="book-mark-modal">
    <div class="modal-header">Book Mark</div>
    <div class="modal-content">
        <div>
            <div class="input-group">
                <label for="book-mark-name">Mark</label>
                <input type="text" id="book-mark-name">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn-tip modal-close book-mark-save" modal-target="book-mark-modal">Save</button>
        <button class="btn-tip modal-close" modal-target="book-mark-modal">Cancel</button>
    </div>
</div>

<!--color-panel-->
<div class="modal" id="color-panel">
    <div class="modal-header">Color</div>
    <div class="modal-content">

        <div>
            <!--background color-->
            <div class="color-row">
                <ul class="color-list background" title="select background color">
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item custom-color-item" title="pick your color"></li>
                </ul>
            </div>
            <!--font color-->
            <div class="color-row">
                <ul class="color-list font" title="select font color">
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item"></li>
                    <li class="color-item custom-color-item" title="pick your color"></li>
                </ul>
            </div>
            <!--highlight color-->
            <div class="color-row">
                <ul class="color-list highlight" title="select highlight color">
                    <li class="color-item custom-color-item bg-red"></li>
                    <li class="color-item custom-color-item bg-yellow"></li>
                    <li class="color-item custom-color-item bg-green"></li>
                    <li class="color-item custom-color-item bg-blue"></li>
                    <li class="color-item custom-color-item bg-orange"></li>
                </ul>
            </div>
        </div>

        <div id="color-picker" class="color-picker"></div>

    </div>
    <div class="modal-footer">
        <button class="btn-tip modal-close color-save" modal-target="color-panel">Save</button>
        <button class="btn-tip modal-close" modal-target="color-panel">Cancel</button>
    </div>
</div>

<!--select menu-->
<div class="select-menu" id="select-menu">
    <div class="ann-color-bar" title="add highlight">
        <span class="ann-color hl-red bg-red"></span>
        <span class="ann-color hl-orange bg-yellow"></span>
        <span class="ann-color hl-green bg-green"></span>
        <span class="ann-color hl-blue bg-blue"></span>
        <span class="ann-color hl-yellow bg-orange"></span>
    </div>
    <div class="divider"></div>
    <div class="menu-item delete-hl" title="delete highlight/underline">Delete</div>
    <div class="menu-item copy-text" title="copy text">Copy</div>
</div>

<script type="text/javascript" src="js/lib/JSZip/jszip.js"></script>
<script type="text/javascript" src="js/lib/epub.js/epub.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-core.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-classapplier.js"></script>
<script type="text/javascript" src="js/lib/rangy-1.3.0/rangy-highlighter.js"></script>
<script type="text/javascript" src="js/highlight.js"></script>
<script type="text/javascript" src="js/bookDB.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="js/currentLocation.js"></script>
<script type="text/javascript" src="js/setting.js"></script>
<script type="text/javascript" src="js/bookMark.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/reader.js"></script>
</body>
</html>